<template>
   <div class="app-container">
      <div class="head-container">
         <a-form :model="queryParams" ref="queryRef" layout="inline">
            <a-form-item prop="menuName">
               <a-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 200px"
                  @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item prop="status">
               <a-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
                  <a-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                     :value="dict.value" />
               </a-select>
            </a-form-item>
            <a-form-item>
               <a-space>
                  <a-button type="primary" @click="handleQuery">
                     <template #icon>
                        <icon-search />
                     </template>
                     搜索</a-button>
                  <a-button @click="resetQuery">
                     <template #icon>
                        <icon-refresh />
                     </template>
                     重置
                  </a-button>
               </a-space>
            </a-form-item>
         </a-form>
      </div>
      <div class="main-container">
         <div class="main-toolbar">
            <a-space>
               <a-button type="primary" size="small" @click="handleAdd()">
                  <tepmlate #icon>
                     <icon-plus />
                  </tepmlate>
                  新增
               </a-button>
               <a-button status="info" size="small" @click="toggleExpandAll">
                  <template #icon>
                     <icon-sort />
                  </template>
                  展开/折叠</a-button>
            </a-space>
         </div>
         <div class="main-content">
            <a-table ref="menuListRef" :columns="columns" :data="menuList" show-empty-tree row-key="menuId">

            </a-table>
         </div>
      </div>
      <MenuForm ref="menuFormRef"></MenuForm>
   </div>
</template>

<script setup name="Menu">
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import MenuForm from "./menuForm";

const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");

const menuList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const menuOptions = ref([]);
const isExpandAll = ref(false);
const refreshTable = ref(true);
const iconSelectRef = ref(null);

const data = reactive({
   form: {},
   queryParams: {
      menuName: undefined,
      visible: undefined
   },
   rules: {
      menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
      orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
      path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
   },
});

const { queryParams, form, rules } = toRefs(data);

const columns = ref([
   { key: 0, title: "菜单名称", dataIndex: "menuName" },
   { key: 1, title: "图标", dataIndex: "icon" },
   { key: 2, title: "排序", dataIndex: "orderNum" },
   { key: 3, title: "权限标识", dataIndex: "perms" },
   { key: 4, title: "组件路径", dataIndex: "component" },
   { key: 5, title: "状态", dataIndex: "status" },
   { key: 6, title: "创建时间", dataIndex: "createTime" },
])

/** 查询菜单列表 */
function getList() {
   loading.value = true;
   listMenu(queryParams.value).then(response => {
      menuList.value = proxy.handleTree(response.data, "menuId");
      loading.value = false;
   });
}
/** 查询菜单下拉树结构 */
function getTreeselect() {
   menuOptions.value = [];
   listMenu().then(response => {
      const menu = { menuId: 0, menuName: "主类目", children: [] };
      menu.children = proxy.handleTree(response.data, "menuId");
      menuOptions.value.push(menu);
   });
}
/** 取消按钮 */
function cancel() {
   open.value = false;
   reset();
}
/** 表单重置 */
function reset() {
   form.value = {
      menuId: undefined,
      parentId: 0,
      menuName: undefined,
      icon: undefined,
      menuType: "M",
      orderNum: undefined,
      isFrame: "1",
      isCache: "0",
      visible: "0",
      status: "0"
   };
   proxy.resetForm("menuRef");
}
/** 展示下拉图标 */
function showSelectIcon() {
   iconSelectRef.value.reset();
}
/** 选择图标 */
function selected(name) {
   form.value.icon = name;
}
/** 搜索按钮操作 */
function handleQuery() {
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}
/** 新增按钮操作 */
function handleAdd(menuId) {
   proxy.$refs.menuFormRef.init('add', menuId)
}
/** 展开/折叠操作 */
function toggleExpandAll() {
   isExpandAll.value = !isExpandAll.value;
   proxy.$refs.menuListRef.expandAll(isExpandAll.value)
}
/** 修改按钮操作 */
async function handleUpdate(row) {
   reset();
   await getTreeselect();
   getMenu(row.menuId).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改菜单";
   });
}
/** 提交按钮 */
function submitForm() {
   proxy.$refs["menuRef"].validate(valid => {
      if (valid) {
         if (form.value.menuId != undefined) {
            updateMenu(form.value).then(response => {
               proxy.$modal.msgSuccess("修改成功");
               open.value = false;
               getList();
            });
         } else {
            addMenu(form.value).then(response => {
               proxy.$modal.msgSuccess("新增成功");
               open.value = false;
               getList();
            });
         }
      }
   });
}
/** 删除按钮操作 */
function handleDelete(row) {
   proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function () {
      return delMenu(row.menuId);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
}

getList();
</script>
